import React from "react";
import Hello from "../Hello";
import styles from "./main.module.css";
import {
  // useHistory,
  // useLocation,
  // useParams,
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  RouteComponentProps,
  Redirect,
} from "react-router-dom";
import { Layout, Menu, Breadcrumb } from "antd";
import {
  DesktopOutlined,
  PieChartOutlined,
  FileOutlined,
  TeamOutlined,
  UserOutlined,
} from "@ant-design/icons";
import UserInfo from "../UserInfo";
import { TableInfo } from "../TableInfo/index";
import FormInfo from "../FormInfo";
import { inject } from "mobx-react";
import { UserInfoStore } from "../../stores/UserInfo.store";

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;
export interface homeState {
  collapsed: boolean;
}

export interface homeProps extends RouteComponentProps {
  name?: string;
  userInfoStore?: UserInfoStore;
}

@inject("userInfoStore")
export default class Home extends React.Component<homeProps, homeState> {
  state = {
    collapsed: false,
  };

  render() {
    return (
      <Layout style={{ minHeight: "100vh" }}>
        <Sider
          collapsible
          collapsed={this.state.collapsed}
          onCollapse={this.onCollapse.bind(this)}
        >
          <div className={styles.logo} />
          <Menu
            theme="dark"
            defaultSelectedKeys={[this.props.location.pathname]}
            mode="inline"
          >
            <Menu.Item key={`${this.props.match.path}`} icon={<UserOutlined />}>
              <Link to={`${this.props.match.path}`}>用户信息</Link>
            </Menu.Item>
            <Menu.Item
              key={`${this.props.match.path}/hello`}
              icon={<DesktopOutlined />}
            >
              <Link to={`${this.props.match.path}/hello`}> hello react</Link>
            </Menu.Item>
            <SubMenu key="sub1" icon={<PieChartOutlined />} title="菜单1">
              <Menu.Item key="3">
                <Link to={`${this.props.match.path}/tableInfo`}>用户列表</Link>
              </Menu.Item>
              <Menu.Item key="4">
                <Link to={`${this.props.match.path}/formInfo`}>表单列表</Link>
              </Menu.Item>
              <Menu.Item key="5">子菜单3</Menu.Item>
            </SubMenu>
            <SubMenu key="sub2" icon={<TeamOutlined />} title="菜单2">
              <Menu.Item key="6">子菜单1</Menu.Item>
              <Menu.Item key="7">子菜单2</Menu.Item>
            </SubMenu>
            {/* <Menu.Item key="9" icon={<FileOutlined />} /> */}
          </Menu>
        </Sider>
        <Layout className={styles["site-layout"]}>
          <Header
            className={styles["site-layout-header"]}
            style={{ padding: 0 }}
          >
            <span> xxx系统</span>
          </Header>
          <Content style={{ margin: "16px 16px" }}>
            {/* <Breadcrumb style={{ margin: "16px 0" }}>
              <Breadcrumb.Item>User</Breadcrumb.Item>
              <Breadcrumb.Item>Bill</Breadcrumb.Item>
            </Breadcrumb> */}
            <div
              className={styles["site-layout-background"]}
              style={{ padding: 24, minHeight: 360 }}
            >
              {this.routerConfigView()}
            </div>
          </Content>
          <Footer style={{ textAlign: "center" }}>
            Ant Design ©2018 Created by Ant UED
          </Footer>
        </Layout>
      </Layout>
    );
  }
  tableInfoRouter(){
    let userInfoStore = this.props.userInfoStore as UserInfoStore;
    if (userInfoStore && userInfoStore.userInfo) {
      return (
        <Route
          path={`${this.props.match.path}/tableInfo`}
          component={TableInfo}
        ></Route>
      );
    } else {
      return undefined;
    }
  }
  routerConfigView() {
    // 路由配置

    return (
      <Switch>
        <Route
          path={`${this.props.match.path}/hello`}
          component={Hello}
        ></Route>
       {this.tableInfoRouter()}
        <Route
          path={`${this.props.match.path}/formInfo`}
          component={FormInfo}
        ></Route>
        <Route path={`${this.props.match.path}`} component={UserInfo}></Route>
        /* 默认路由只能放最后不然会拦截所有地址 */
        
      </Switch>
    );
  }

  onCollapse(collapsed: boolean) {
    console.log(collapsed);
    this.setState({ collapsed });
  }
}
